<template>
  <Dialog :title="dialogTitle" :draggable="false" v-model="dialogVisible">
    <el-form ref="formRef" :model="formData" :rules="formRules" label-width="100px" v-loading="formLoading">
      <el-form-item label="图库名称:" prop="name">
        <el-input v-model="formData.name" placeholder="请输入" />
      </el-form-item>
      <el-form-item label="图库类别:" prop="type">
        <div class="wrap flex w-[400px] flex-wrap gap-4">
          <categoryCom v-for="(cate, index) in categorys" :key="index">
            <template #top>
              <img class="w-[120px] h-[60px]" :src="cate.pic" alt="" />
            </template>
            <template #bottom>
              <el-radio v-model="formData.type" :label="cate.label" :value="cate.value"
                @change="(val) => toValue0(val)" />
            </template>
          </categoryCom>
        </div>
      </el-form-item>
      <el-form-item label="是否私有:" prop="type">
        <el-radio-group v-model="formData.isPrivate" @change="(val) => toValue1(val)">
          <el-radio v-for="(item, index) in isPrivateArr " :value="item.value" :key="index" :label="item.label" />
        </el-radio-group>
      </el-form-item>
      <el-form-item label="图库描述:" prop="type">
        <el-input v-model="formData.description" placeholder="请输入" />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button type="primary" @click="createGalleryMethod">{{ btnMsg }}</el-button>
      <el-button @click="closeModal">取 消</el-button>
    </template>
  </Dialog>
</template>

<script setup lang="ts">
import { createGallery, updateGallery } from '@/api/gallery-upload/index'
import categoryCom from './categoryCom.vue'
import { cates } from '@/utils/a-common'

const emit = defineEmits(['success'])
const message = useMessage()
let callBack = ref(0)
const btnMsg = ref('确 定')
const categorys = ref(cates)
const formLoading = ref(false)
const dialogTitle = ref('新建图库')
const dialogVisible = ref(false)
const isPrivateArr = ref([
  {
    label: '私有',
    value: 1
  },
  {
    label: '公开',
    value: 2
  }
])
const formData = reactive({
  name: '',
  type: 1,
  description: '',
  isPrivate: 1
})

const closeModal = () => {
  formData.name = ''
  formData.type = 1
  formData.description = ''
  formData.isPrivate = 1
  dialogVisible.value = false
}

const formRules = reactive({
  name: [{ required: true, message: '产品名称不能为空', trigger: 'blur' }],
  specs: [{ required: true, message: '产品规格不能为空', trigger: 'blur' }],
  type: [{ required: true, message: '产品型号不能为空', trigger: 'blur' }],
  costMinPrice: [{ required: true, message: '成本最低价格(元)不能为空', trigger: 'blur' }],
  suggestedMinPrice: [{ required: true, message: '建议最低售价(元)不能为空', trigger: 'blur' }],
  status: [{ required: true, message: '状态不能为空', trigger: 'blur' }],
  categoryId: [{ required: true, message: '产品分类编号不能为空', trigger: 'blur' }],
  brandId: [{ required: true, message: '产品品牌编号不能为空', trigger: 'blur' }],
  supplierId: [{ required: true, message: '产品供应商编号不能为空', trigger: 'blur' }]
})

const toValue0 = (val: any) => {
  console.log(val)
}

const successFn = (res) => {
  // console.log(res)
  if (res) {
    // code为0，表示成功
    message.success('操作成功！！！')
    emit('success');
    closeModal()
  } else {
    message.error('network error')
    console.log(res)
  }
}

//创建图库基本信息的方法
const createGalleryMethod = async () => {
  if (callBack.value === 1) {
    const res = await updateGallery(formData);
    successFn(res)
  } else {
    const res = await createGallery(formData);
    successFn(res)
  }
}
// 打开弹窗
const open = (row?) => {
  dialogVisible.value = true
  if (row) {
    // 
    //传递row 表示更新
    Object.assign(formData, row)
    callBack.value = 1
    // btnMsg.value = '修 改'
  }
}
//重置查询条件
defineExpose({ open }) // 暴露方法，外面可以直接实例.open（）方法名调用

onMounted(() => { })

onBeforeUnmount(() => { })
nextTick(() => { })
</script>

<style lang="scss" scoped>
:deep(.file-box) {
  padding: 10px !important;
}

.file-list {
  position: relative;
  overflow-x: hidden;
  overflow-y: auto;
  background-color: #fff;
  transition: all 0.3s;

  .file-item {
    background-color: #fff;
  }
}

.page-home {
  height: 100%;
}

.file-box {
  position: relative;
  margin-top: 20px;
  padding: 30px;
  flex: 1;
  background-color: #fff;

  .title {
    padding-left: 10px;
    font-size: 15px;
    border-left: 4px solid #1989fa;
  }

  .empty {
    .upload {
      color: #1989fa;
      cursor: pointer;
    }
  }
}
</style>
